<html manifest="IGNORE.manifest"  lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/index.css"  th:href="@{${uiPath} + ${appName} + '/css/index.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" th:href="@{${uiPath} + ${appName} + '/css/reset.css'}" />
    <link rel="stylesheet" type="text/css" href="../css/CLSRZ.css"  th:href="@{${uiPath} + ${appName} + '/css/CLSRZ.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/zdialog.css"  th:href="@{${uiPath} + ${appName} + '/css/zdialog.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/webuploader.css"  th:href="@{${uiPath} + ${appName} + '/css/webuploader.css'}"/>
    <script type="text/javascript" src="../js/flexible.js" th:src="@{${uiPath} + ${appName} + '/js/flexible.js'}"></script>
</head>
<body>
<div class="rzzong">
    <form id="commentForm" th:action="@{'/designerUser/wltUpdate'}" method="post">
        <div class="gtoubu">
            <a href="CLSSingle.html"><img class="fanhui" src="../images/raw_1503386635.png" alt="" th:src="@{${uiPath} + ${appName} + '/images/raw_1503386635.png'}"></a>
            <p class="biaoti">设计图</p>
        </div>

        <div class="renzhengtishi">

            <img class="dingwei dingweiyixa" src="../images/raw_1503289426.png" alt=""th:src="@{${uiPath} + ${appName} + '/images/raw_1503289426.png'}">
            <div class="kuaiw"></div>
            <input type="hidden" name="demandId" th:value="${data.demandId}">
            <input type="hidden" name="id" th:value="${data.id}">

            <div id="shctp1"  th:if="${not #lists.isEmpty(data.wuliaotu)}" >
                <div id="uploader-demo" style="width: 10rem">
                    <div id="filePickerd" class="zhaopianbeijing" style="width: 10rem"></div>
                    <div id="fileList" class="xqtu uploader-list" style="width: 10rem"  th:style="'width: 10rem;background-image: url('+${data.wuliaotu}+')'"></div>
                </div>
                <input type="hidden" id="img1" name="img" th:value="${data.wuliaotu}">

            </div>
            <div id="shctp1"  th:if="${not #lists.isEmpty(data.wuliaotu5)}" >
                <div id="uploader-demo" style="width: 10rem">
                    <div id="filePickerd" class="zhaopianbeijing" style="width: 10rem"></div>
                    <div id="fileList" class="xqtu uploader-list" style="width: 10rem"  th:style="'width: 10rem;background-image: url('+${data.wuliaotu5}+')'"></div>
                </div>
                <input type="hidden" id="img1" name="img" th:value="${data.wuliaotu5}">

            </div>
            <div id="shctp2" th:if="${not #lists.isEmpty(data.wuliaotu2)}" >
                <div id="uploader-demo" style="width: 10rem">
                    <div id="filePickerd2" class="zhaopianbeijing" style="width: 10rem"></div>
                    <div id="fileList2" class="xqtu uploader-list" style="width: 10rem"  th:style="'width: 10rem;background-image: url('+${data.wuliaotu2}+')'"></div>
                </div>
                <input type="hidden" id="img2" name="wuliaotu2" th:value="${data.wuliaotu2}">

            </div>
            <div id="shctp3"  th:if="${not #lists.isEmpty(data.wuliaotu3)}">
                <div id="uploader-demo" style="width: 10rem">
                    <div id="filePickerd3" class="zhaopianbeijing" style="width: 10rem"></div>
                    <div id="fileList3" class="xqtu uploader-list" style="width: 10rem"  th:style="'width: 10rem;background-image: url('+${data.wuliaotu3}+')'"></div>
                </div>
                <input type="hidden" id="img3" name="img3" th:value="${data.wuliaotu3}">
            </div>
            <div id="shctp4"   th:if="${not #lists.isEmpty(data.wuliaotu4)}">
                <div id="uploader-demo" style="width: 10rem">
                    <div id="filePickerd4" class="zhaopianbeijing" style="width: 10rem"></div>
                    <div id="fileList4" class="xqtu uploader-list" style="width: 10rem"  th:style="'width: 10rem;background-image: url('+${data.wuliaotu4}+')'"></div>
                </div>
                <input type="hidden" id="img4" name="img4" th:value="${data.wuliaotu4}">
            </div>

        </div>
    </form>

    <div class="kuaiw"></div>
    <div class="nextx" th:onclick="'zengjiaTp()'">
        <p class="nextdd">增加一张</p>
    </div>
    <div class="kuaiw"></div>
    <div class="nextx" th:if="${type==5}" onclick="update()">
        <p class="nextdd">修改</p>
    </div>
</div>



<script type="text/javascript" src="../js/jquery.min.js" th:src="@{${uiPath} + ${appName} + '/js/jquery.min.js'}"></script>
<script type="text/javascript" src="../js/CLSRZ.js" th:src="@{${uiPath} + ${appName} + '/js/CLSRZ.js'}"></script>

<script type="text/javascript" src="../js/webuploader.min.js" th:src="@{${uiPath} + ${appName} + '/js/webuploader.min.js'}"></script>

<script type="text/javascript" src="../js/zdialog.js" th:src="@{${uiPath} + ${appName} + '/js/zdialog.js'}"></script>
<script type="text/javascript" src="../js/scsjt.js" th:src="@{${uiPath} + ${appName} + '/js/scsjt.js'}"></script>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" th:src="'http://res.wx.qq.com/open/js/jweixin-1.2.0.js'"></script>

<script th:inline="javascript">
    var i=2;

    var data=[[${data}]];
    function zengjiaTp(){
        var size = i;
        if(size>=20){
            alert("最多添加20张图片");
        }else{
            var div = " <div class=\"kuaiw\"></div>\n <div id=\"shctp"+size+"\">\n" +
                "                <div id=\"uploader-demo\" style=\"width: 10rem\">\n" +
                "                    <div id=\"filePickerd"+size+"\" class=\"zhaopianbeijing\" style=\"width: 10rem\"></div>\n" +
                "                    <div id=\"fileList"+size+"\" class=\"xqtu uploader-list\" style=\"width: 10rem\"></div>\n" +
                "                </div>\n" +
                "                <input type=\"hidden\" id=\"img"+size+"\" name=\"wuliaotu"+size+"\">\n" +
                "                \n" +
                "            </div>";
            $('.renzhengtishi').append(div);

            initUploader1(size)
            i++
        }


    }
    function initUploader() {
        //百度上传按钮

        var uploader = WebUploader.create({
            // swf文件路径
            swf: '../webuploader-0.1.5/Uploader.swf',
            // 文件接收服务端
            method: 'POST',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                "id": '#filePickerd',
                "multiple": true
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 选完文件后，是否自动上传。
            auto: false,
            // 只允许选择图片文件
            accept: {
                title: '图片文件',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('fileQueued', function (file) {
            $.ajax({
                url: 'http://easyjiang.huizhuangfang.com.cn/aliyun/oss/policy',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function (result) {
                    var suffix = get_suffix(file.name);
                    var random_name = random_string();
                    uploader.options.formData.key = result.dir + '/' + random_name + suffix;
                    uploader.options.formData.policy = result.policy;
                    uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
                    uploader.options.formData.success_action_status = 200;
                    uploader.options.formData.callback = result.callback;
                    uploader.options.formData.signature = result.signature;
                    uploader.options.server = result.action;
                    uploader.upload();
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        });
        uploader.on('uploadSuccess', function (file, response) {

            $('#img1').val(response.data.filename).focus();

            $("#fileList").css("background-image", 'url("' + response.data.filename + '")');
            uploader.destroy();
            initUploader();


        });
        uploader.on('uploadError', function (file) {
            console.log('uploadError', file);
        });
    }
    window.onload = function() {
        if(data.wuliaotu!=null){
            initUploader();
            i=2+1;
        }
        if(data.wuliaotu2!=null){
            initUploader1(2);
            i=2+1;
        }
        if(data.wuliaotu3!=null){
            initUploader1(3);
            i=3+1;
        }
        if(data.wuliaotu4!=null){
            initUploader1(4);
            i=4+1;
        }
        if(data.wuliaotu5!=null){
            initUploader1(5);
            i=5+1;
        }

    }


    // 根据路径获取后缀
    function get_suffix(filename) {
        var pos = filename.lastIndexOf('.');
        var suffix = '';
        if (pos != -1) {
            suffix = filename.substring(pos);
        }
        return suffix;
    }

    // 随机字符串
    function random_string(len) {
        len = len || 32;
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var maxPos = chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
    function  update() {
        $.ajax({
            type:'post',
            url:$('#commentForm').attr('action'),
            data:$('#commentForm').serialize(),
            dataType:'json',
            success:function (result) {
                if(result.code==1){
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "提交成功", Content:result.data ,BtnL:"确定",BtnR:"取消"})
                }else{
                    $.DialogByZ.Close();
                    $.DialogByZ.Alert({Title: "已存在此需求单的案例，如需修改请点击修改", Content:result.data  ,BtnL:"确定"})
                }
            }
        })

    }
</script>

</body>
</html>